@import "../common/vars.scss";
@import "../mixins/mixins.scss";
@include create(message){
    height: auto;
    background:$message-default-backgroud-fill;
    border-radius:$message-default-radius;
    font-size:$font-size-base;
    line-height:$message-default-line-height;
    box-shadow:$box-shadow-base;
    position:fixed;
    top:20px;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s, transform 0.4s;
    z-index: $message-default-zindex;
    table{
        border-style: none;
    }
    @include m(icon){
        div{
            width: $message-default-icon-width;
            text-align: center;
            color: $message-default-text-color;
        }
        @include m(info){
            background: $color-primary;
        }
        @include m(success){
            background: $color-success;
        }
        @include m(warning){
            background: $color-warning;
        }
        @include m(error){
            background: $color-danger;
        }
    }
    @include m(text){
        min-width:120px;
        padding:0 10px;
        color:$color-text-regular;
    }
    @include m(close){
        width:$message-default-icon-width;
        @include m(btn){
            height: $message-default-line-height;
            text-align: center;
            cursor: pointer;
            color: $color-text-regular;
            &:hover{
                color: $color-primary;
            }
        }
    }
}
.aiui-message-fade-enter,
.aiui-message-fade-leave-active {
  opacity: 0;
  -webkit-transform: translate(-50%, -100%);
  transform: translate(-50%, -100%);
}